<template>
	<div class="container">
	    <ul class="complete-list">
	    	<li>
	    		<h3 class="titInfo">到访信息</h3>
	    		<ul class="info-list">
	    			<li>
	    				<i class="fa fa-user-o faIcon"></i>
		    			<span class="name">李跃</span>
		    			<span class="sex"></span>
		    			<span class="label">保护带看</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-mobile faIcon"></i>
		    			<span class="name">18910154774</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-clock-o faIcon"></i>
		    			<span class="time">报备时间：2017-09-09  14:23</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-file-text-o faIcon"></i>
		    			<p class="time">备注：000000000</p>
		    			
	    			</li>
	    		</ul>
	    	</li>
	    	<li>
	    		<h3 class="titInfo">经纪人信息</h3>
	    		<ul class="info-list">
	    			<li>
	    				<i class="fa fa-user-o faIcon"></i>
		    			<span class="name">王刚</span>
		    			<span class="sex active"></span>
	    			</li>
	    			<li>
	    				<i class="fa fa-mobile faIcon"></i>
		    			<span class="name">18910154774</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-clock-o faIcon"></i>
		    			<span class="time">报备时间：2017-09-09  14:23</span>
	    			</li>
	    			<li>
	    				<i class="fa fa-file-text-o faIcon"></i>
		    			<p class="time">备注：000000000</p>
		    			
	    			</li>
	    		</ul>
	    	</li>
	    </ul>
	    <div class="footer">
	    	<div class="footer-content">
	    		<a href="javascript:;" class="operationBtn btnOne">无效</a>
	    		<a href="javascript:;" class="operationBtn btnTwo" @click="completionNum">补全号码</a>
	    	</div>
	    </div>
	    <!-- 弹出层 -->
	    <div class="popup-page" v-if="isShow">
	    	<div class="popup-mask"></div>
	    	<div class="popup-container">
	    		<div class="popup-header">补全号码</div>
	    		<div class="popup-body">
	    			<div class="complete-information">
	    				<p>请将手机号中间四位补充完整</p>
	    				<div class="information-number">
	    					<span class="existingNumer">136</span>
	    					<div class="number-list">
	    						<span class="number-list-item">{{ userTel.numA }}</span>
	    						<span class="number-list-item">{{ userTel.numB }}</span>
	    						<span class="number-list-item">{{ userTel.numC }}</span>
	    						<span class="number-list-item">{{ userTel.numD }}</span>
	    					</div>
	    					<span class="existingNumer">8945</span>
	    					<input type="tel" maxlength="4" class="number-input-box" v-model="helfTel">
	    				</div>
	    			</div>
	    		</div>
	    		<div class="popup-footer">
	    			<a href="javascript:;" class="btn" @click="closeMask">取消</a>
	    			<a href="javascript:;" class="btn checkBtn">确定</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	export default {
		data () {
		    return {
		    	isShow:false,
		    	helfTel:''
		    }
		},
		components :{
			
		},
		methods :{
			completionNum() {
				this.isShow = true;
			},
			closeMask() {
				this.isShow = false;
			}
		},
		mounted (){
			
		},
		computed: {
			userTel () {
		      let numA,numB,numC,numD
		      if ((this.helfTel).length > 0) {
		        numA = this.helfTel.substring(0,1); 
		        numB = this.helfTel.substring(1,2);
		        numC = this.helfTel.substring(2,3);
		        numD = this.helfTel.substring(3,4);
		      }
		      return {
		        numA,numB,numC,numD
		      }
		    }
		},
	}
</script>
<style scoped>
	.complete-list{margin-bottom: 70px;}
	.complete-list>li{border-top: 1px solid #cdcdcd;border-bottom: 1px solid #cdcdcd;margin-top: 10px;padding: 12px 10px;background-color: #fff;}
	.titInfo{width: 100%;padding: 0 12px;height: 28px;line-height: 28px;font-size: 14px;color: #333;background-color: #f5f5f5;font-weight: normal;}

	.info-list>li{padding-left: 40px;position: relative;line-height: 22px;margin-top: 16px;width: 100%;}
	.info-list .faIcon{position: absolute;left: 10px;top: 4px;color: #333;left: 10px;}
	.info-list .fa-mobile{font-size: 20px;top: 1px;left: 12px;}
	.info-list .name{color: #333;margin-right: 6px;}
	.info-list .sex{width: 16px;height: 14px;overflow: hidden;background: url(../assets/images/sex.png) no-repeat;background-size: 32px auto;display: inline-block;position: relative;top: 2px;margin-right: 2px;background-position: 0 0;}
	.info-list .sex.active{background-position: -16px 0; }
	.info-list .label{height: 14px;background-color: #65baf5;color: #fff;font-size: 12px;padding: 0 6px;display: inline-block;line-height: 14px;margin-right: 2px;}
	.info-list .time{color: #999;}

	/*底部按钮*/
	.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
	.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
	.footer-content .btnOne{background-color: #fff;border-top: 1px solid #cdcdcd;color: #9d9d9d;}
	.footer-content .btnTwo{background-color: #eb6100;color: #fff;}


	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	.complete-information{text-align: center;}
	.information-number{position: relative;line-height: 34px;padding-left: 8px;margin-top: 8px;}
	.information-number .existingNumer,.information-number .number-list{float: left;}
	.existingNumer{display: inline-block;}
	.number-list{display: inline-block;border-radius: 4px;border:1px solid #cdcdcd;height: 34px;line-height: 32px;margin: 0 6px;}
	.number-list .number-list-item{width: 30px;height: 100%;display: inline-block;border-right: 1px solid #cdcdcd;float: left;}
	.number-list .number-list-item:last-child{border-right: none;}
	.number-input-box{position: absolute;height: 34px;left: 40px;width: 135px;opacity: 0;}

	.footer-content:after,.information-number:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

</style>